<template>
  <Page ref="page" v-slot:default="{contentClass, listerData, more}" :lister="lister">
      <div :class="contentClass" class="pt-0 overflow-scroll">

        <van-sticky>
          <van-tabs v-model:active="active">
            <van-tab v-for="(tab, index) in tabs" :title="tab.name"></van-tab>
          </van-tabs>
        </van-sticky>

        <van-list
            v-model:loading="loading"
            :finished="!more"
            finished-text="没有更多了"
            @load="onLoad">
          <div class="mt-4 mx-1 rounded-lg bg-white" style="padding: .625rem;" v-for="(order, index) in listerData">
            <div class="flex justify-between">
              <div class="text-xs text-gray-400">订单号: {{order.out_trade_no}}</div>
              <div class="text-xs text-orange-400">{{order.statusText}}</div>
            </div>
            <div v-for="goods in order.order_goods" class="flex flex-row" style="margin-top: 0.8rem">
              <van-image :src="goods.goods_snapshot?.cover" width="4rem" height="4rem" fit="cover" radius="0.31rem"></van-image>
              <div class="flex flex-col flex-1">
                <div class="flex justify-between">
                  <div class="ml-2 text-sm">{{goods.goods_snapshot?.name}}</div>
                  <div class="ml-2 text-xs text-gray-400">&yen; {{goods.goods_snapshot?.price}}</div>
                </div>
                <div class="flex justify-between">
                  <div class="ml-2 text-xs text-gray-400">{{goods.goods_sku_snapshot?.name}}</div>
                  <div class="ml-2 text-xs text-gray-400">x {{goods.count}}</div>
                </div>
              </div>
            </div>
            <div v-if="order.order_goods.length<=0" class="text-sm" style="margin-top: 0.8rem">
              {{order.body}}
            </div>
            <div class="text-right text-xs">
              实付款 &yen;{{order.total}}
            </div>
            <div class="flex justify-end mt-4 operates">
              <template v-for="(operate, key) in order.operaters">
                <van-button size="normal" round @click.stop="onOperate(order, operate, key)">{{operate.name}}</van-button>
              </template>
            </div>
          </div>
        </van-list>

        <van-popup v-model:show="refundConfirm.show" class="relative rounded-lg w-3/5" style="overflow-y: initial">
          <div class="w-full">
            <div class="p-3 border-b text-center">退款</div>
            <div class="p-4">
              <van-cell-group inset>
                <van-field
                    v-model="refundConfirm.reason"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入退款原因"
                    show-word-limit
                />
              </van-cell-group>
              <van-button block type="primary" @click="onRefund">退款</van-button>
            </div>
          </div>
          <div class="-mb-8 text-white text-center text-xl" @click="refundConfirm.show = false">
            <van-icon name="close"/>
          </div>
        </van-popup>
      </div>
  </Page>
</template>

<script setup>
import {provide, ref} from 'vue';
import { Dialog } from 'vant';
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import Page from "../components/Page.vue"
import {computed, onMounted, watch} from "vue";

import apis from '../apis'
import app from "../configs/app";

const store = useStore()
const router = useRouter()
const route = useRoute()

const page = ref()
const loading = computed(() => page.value ? page.value.loading : true)


const currentOrder = ref(null)
const refundConfirm = ref({
  show: false,
  reason: "",
})

const active = ref(0)
const tabs = [{
  name: '全部',
}, {
  name: '待支付',
  value: 0
}, {
  name: '待核销',
  value: 8
}, {
  name: '已完成',
  value: 6
}]

const lister = ref({
  enabled: true,
  pageable: true,
  modelName: 'order',
  query: {
    status: null
  },
  autoload: false
})

onMounted(() => {

})

watch(() => active.value, (value) => {
  lister.value.query.status = tabs[value].value
  page.value.onRefresh()
})

const cancel = (order) => {
  Dialog.confirm({
    title: '取消确认',
    message:
        '确认取消吗？',
  })
  .then(() => {
    // on confirm
    apis.order.cancel({id: order.id}, {}).then(() => {
      page.value.onRefresh()
    })
  })
  .catch(() => {
    // on cancel
  });
}

const pay = (order) => {
  location.href = app.payUrl + "?order_id=" + order.id + "&back_url=" +  encodeURIComponent(location.origin + location.pathname +  (app.history=='history'?'':'/#') + "/?activity_id=" + route.query.activity_id,)
}

const refund = (order) => {
  refundConfirm.value.show = true
  currentOrder.value = order
}

const onRefund = () => {
  apis.order.refund({id: currentOrder.value.id}).then(() => {
    page.value.onRefresh()
  })
  refundConfirm.value.show = false
}

const operates = {
  cancel,
  pay,
  refund
}

const onOperate = (order, operate, key) => {
  console.log([order, operate, key])
  if (operates[key]) {
    operates[key](order)
  }
}

const onDetail = (order) => {
  router.push({name: 'order-detail', query: {id: order.id}})
}

const onLoad = () => {
  page.value.onMore()
}
</script>

<style scoped>
  .operates button:not(:first-child) {
    margin-left: .2rem;
  }
</style>